<template>
<div>
            <div class="water">
                <div v-for="t in menu">
                    <img :src="t.activity.img" />
                    <p>{{t.activity.name}}</p>
                </div>
            </div>
			<div class="purple">
				<div>
					<img src="/static/images/cms_122979_1500431583.jpg" />
				</div>
				<div>
					<img src="/static/images/cms_123322_1500176917.jpg" />
				</div>
				<div>
					<img src="/static/images/cms_123470_1500863213.jpg" />
				</div>
			</div>
			<div class="bike">
				<img src="/static/images/201705221117303.png@90Q.png" />
			</div>
			<div class="mos">
				<div>
					<img src="/static/images/2016092417285271.jpg@90Q.jpg" />
				</div>				
				<div>
					<img src="/static/images/2017030919451621.jpg@90Q.jpg" />
				</div>
			</div>
			<div class="food">
				<div>
					<img src="/static/images/2016092415272487.png@90Q.png" />
					<p>休闲食品</p>
				</div>
				<div>
					<img src="/static/images/2016092415283782.png@90Q.png" />
					<p>生活用品</p>
				</div>
				<div>
					<img src="/static/images/2016092415274759.png@90Q.png" />
					<p>方便速食</p>
				</div>
				<div>
					<img src="/static/images/2016092411075920.png@90Q.png" />
					<p>更多分类</p>
				</div>			
			</div>
			<div class="office">
				<div>
					<img src="/static/images/201609241914489.jpg@90Q.jpg" />
				</div>
				<div>
					<img src="/static/images/2016112918160610.jpg@90Q.jpg" />
				</div>
			</div>
</div>
 
</template>

<script>
export default {
  props:['menu']
}
</script>
<style scoped>
.water{
	display: flex;
	justify-content: space-around;
	text-align: center;	
	flex-wrap: wrap;
	border-top: 1rem solid rgba(246,246,246,.95); 
	border-bottom: 1rem solid rgba(246,246,246,.95); 
}
.water div{
	width: 25%;
	font-size: 1.2rem;
	padding: 1rem 0;
	color: #777777;
}
.water div img{
	width: 100%;
}

.purple{
	display: flex;
	justify-content: space-around;	
	border-bottom: 1rem solid rgba(246,246,246,.95); 
}
.purple div{
	width: 33%;
}
.purple div img{
	width: 100%;
}
.bike img{
	width: 100%;
}
.mos{
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.mos div:first-of-type{
	padding: .5rem 1rem 1rem 1rem;
} 
.mos div:last-of-type{
	padding: .5rem 1rem 1rem .5rem;
}
.mos img{
	width: 100%;
}
.food{
	display: flex;
	justify-content: space-around;
	text-align: center;
	align-items: center;
	/*margin-bottom: 8rem;*/
	padding-bottom: .5rem;
	border-bottom: .2rem solid rgba(246,246,246,.95); 
	
}
.food div{
	color: #777;
	font-size: 1.2rem;
}
.food div img{
	width: 100%;
}
.office{
	display: flex;
	justify-content: space-between;
	border-bottom: 1rem solid rgba(246,246,246,.95); 
}
.office div{
	width: 49%;
	border-right: .1rem solid rgba(246,246,246,.95); 
}
.office div img{
	width: 100%;
}
</style>
